<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的客服--客户端</title>
    <link rel="stylesheet" href="../../static/css/common.css" />
    <script type="text/javascript" src="../../static/js/common.js" ></script>
    <script type="text/javascript" src="../../static/js/jquery-2.1.4.js" ></script>
    <style>

    </style>
</head>
<body>
<h1>客户端</h1>
<div class="zongbox">
    <div class="kefu">
        <div class="top">
            <img class="headimg" src="../../static/images/headimg.png" />
            <p class="username">我的客服</p>
            <p class="tuitext">退出</p>
            <img class="tui_icon" src="../../static/images/tui_icon.jpg" />
        </div>
        <div class="content">
            <div class="contentleft">
                <!--聊天内容-->
                <div class="ltbox">

                </div>
                <!--发送聊天-->
                <div class="fslt">
                    <div class="fs_text">
                        <textarea class="fsnr" placeholder="请简要、准确的描述您的问题"></textarea>
                    </div>
                    <div class="fs_btn">
                        发送
                    </div>
                </div>
            </div>
            <!--右侧内容-->
            <div class="contentright">
                <button>按钮按钮</button>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
        socket = new WebSocket("http://localhost:8087/websocket/20".replace("http","ws"));
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            //发现消息进入    开始处理前端触发逻辑
            var time = "2020-02-02 09:13:00";
            var img = "../../static/images/headimg.png";
            var htmlstr ='<div class="ltkf"><p class="kftime">'+time+'</p>' +
                '<div><img class="kfimg" src="'+img+'" /><div><p>'+msg.data+'</p>' +
                '</div></div></div><p class="clear"></p>';
            $(".ltbox").append(htmlstr);
            $(".fsnr").val("");
            var scrollHeight = $('.ltbox').prop("scrollHeight");
            $('.ltbox').scrollTop(scrollHeight,200);
        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
        //离开页面时，关闭socket
        //jquery1.8中已经被废弃，3.0中已经移除
        // $(window).unload(function(){
        //     socket.close();
        //});
    }
</script>
<script>
    $(document).keypress(function(e) {
        // 回车键事件
        if(e.which == 13) {
            sendMsg();
        }
    });
    $(".fs_btn").click(function () {
        sendMsg();
    });

    function sendMsg() {
        var chatMsg = $(".fsnr").val();
        $.ajax({
            url:"/socket/push/21?message="+chatMsg,
            type:"get",
            success:function (res) {
                var time = "2020-02-02 09:13:00";
                var img = "../../static/images/A_icon.png";
                var htmlstr ='<div class="ltuser"><p class="kftime">'+time+'</p>' +
                    '<div><img class="kfimg" src="'+img+'" /><div><p>'+chatMsg+'</p>' +
                    '</div></div></div><p class="clear"></p>';
                $(".ltbox").append(htmlstr);
                $(".fsnr").val("");
                var scrollHeight = $('.ltbox').prop("scrollHeight");
                $('.ltbox').scrollTop(scrollHeight,200);
            }
        })
    }
</script>
</html>
